/**
 * Created by Ysssssss on 21/1/21.
 */

import React, { PureComponent } from 'react'
import PropTypes from 'prop-types';
import {Link, withRouter} from 'react-router-dom'
import { Breadcrumb } from 'antd'

const PageContainer = props => {
    const {
        breadcrumb = [],
        buttonList = [],
        children,
        history,
    } = props

    let _breadcrumb = breadcrumb || []
    if (breadcrumb && typeof breadcrumb === 'string') {
        _breadcrumb = [{
            name: breadcrumb
        }]
    }

    return (
        <>
            <div className={`bilin-web-container${_breadcrumb.length ? ' with-breadcrumb' : ''}${buttonList.length ? ' with-footer' : ''}`}>
                { _breadcrumb.length ? (
                    <Breadcrumb className="breadcrumb-container">
                        { _breadcrumb.map((item, index) => (
                            <Breadcrumb.Item
                                key={`breadcrumb_${index}`}
                                {...(
                                    item.back ? {
                                        href: '#'
                                    } : {}
                                )}
                                onClick={(e) => {
                                    e.preventDefault()
                                    item.back && history.goBack()
                                }}
                            >
                                {item.navTo ? (
                                    <Link to={item.navTo}>{ item.name }</Link>
                                ) : item.name}
                            </Breadcrumb.Item>
                        )) }
                    </Breadcrumb>
                ) : null }
                {children}
            </div>
            { buttonList && buttonList.length ? (
                <div className="bilin-web-footer">
                    { buttonList }
                </div>
            ) : null }
        </>
    )
}

export default withRouter(PageContainer)